<template>
  <div class="user">
    <user-search
      @resetClick="handleResetClick"
      @queryClick="handleQueryClick"
    ></user-search>
    <user-content
      ref="contentRef"
      @newClick="handleNewClick"
      @editClick="handleEditClick"
    ></user-content>
    <user-modal ref="modalRef"></user-modal>
  </div>
</template>

<script setup lang="ts" name="user">
import userContent from './c-cpns/userContent.vue'
import userSearch from './c-cpns/userSearch.vue'
import userModal from './c-cpns/userModal.vue'
import { ref } from 'vue'
const contentRef = ref<InstanceType<typeof userContent>>()
const modalRef = ref<InstanceType<typeof userModal>>()
function handleQueryClick(formData: any) {
  contentRef.value?.fetchUserListData(formData)
}
function handleResetClick() {
  contentRef.value?.fetchUserListData()
}
// 对modal组件的触发
// 新建用户事件
function handleNewClick() {
  modalRef.value?.setModalVisible()
}
// 编辑用户事件
function handleEditClick(itemData: any) {
  modalRef.value?.setModalVisible(false, itemData)
}
</script>

<style lang="less" scoped>
.user {
  border-radius: 10px;
  overflow: hidden;
}
</style>
